<template>
  <div class="tui-menu-item" :class="{
    'tui-menu-item--active': isActive,
    'tui-menu-item--disabled': disabled,
    'tui-menu-item--collapse': menuContext.props.verticalCollapse && menuContext.props.mode === 'vertical',
    'tui-menu-item--divided': divided,
    [`tui-menu-item--level-${menuContext.menuLevel.value}`]: true
  }" @click.stop="handleClick">
    <!-- 菜单项内容 -->
    <span class="tui-menu-item__title-content">
      <!-- 显示菜单项图标 -->
      <tui-icon v-if="icon" ref="iconRef" class="tui-menu-item__item-icon" :icon="icon" :animation-enabled="isActive"></tui-icon>
      <span class="tui-menu-item__title-text">
        <slot>{{ title }}</slot>
      </span>
    </span>
    <!-- 水平菜单的指示线 -->
    <i v-if="isActive && menuContext.props.mode === 'horizontal'" class="tui-menu-item__active-border"></i>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, inject, watch, onMounted } from 'vue';
import type { TuiMenuContext, TuiMenuItemProps } from './types';
import type { ComponentPublicInstance } from 'vue';

// 定义props
const props = withDefaults(defineProps<TuiMenuItemProps>(), {
  index: '',
  route: '',
  disabled: false,
  divided: false,
  icon: '',
  title: ''
});

// 注入父菜单上下文
const menuContext = inject<TuiMenuContext>('menuContext', {} as TuiMenuContext);
const innerIndex = ref([menuContext.innerIndex.value, props.index].filter(i => !!i).join('.'));
// 引用图标组件
const iconRef = ref<ComponentPublicInstance | null>(null);

// 计算属性
const isActive = computed(() => {
  if (props.disabled) return false;

  const currentActiveIndex = menuContext.activeIndex.value;
  if (currentActiveIndex && currentActiveIndex === innerIndex.value) {
    return true;
  }

  // 如果启用了路由模式，检查路由是否匹配
  if (menuContext.props.isRouter && props.route) {

  }

  return false;
});

// 处理点击事件
function handleClick() {
  if (props.disabled) return;

  // 先调用handleSelect设置当前项为激活状态
  !isActive.value && menuContext.handlers?.handleSelect(innerIndex.value);
}

// 监听isActive变化，控制动画状态
watch(
  () => isActive.value,
  (newActive) => {
    if (!iconRef.value) return;

    if (newActive) {
      // 激活时播放动画
      (iconRef.value as any).restartAnimation?.();
    } else {
      // 非激活时停止动画
      (iconRef.value as any).stopAnimation?.();
    }
  },
  { immediate: true }
);

// 组件挂载后，如果在teleport中渲染，确保应用正确的CSS变量
onMounted(() => {
  const menuItemElement = iconRef.value?.$el?.parentElement?.parentElement;
  if (menuItemElement && menuContext.styles?.applyCssVars) {
    // 检查是否在teleport渲染的元素中
    if (menuItemElement.closest('[style*="position: absolute"]')) {
      menuContext.styles.applyCssVars(menuItemElement);
    }
  }
});
</script>

<style lang="scss" scoped>
// 菜单项样式 - 使用嵌套结构优化
.tui-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px 18px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  background-color: var(--tui-menu-background-color);
  color: var(--tui-menu-text-color);

  // 悬停状态
  &:hover:not(&--disabled) {
    background-color: var(--tui-menu-hover-background-color);
  }

  // 菜单项内容容器样式
  &__title-content {
    display: flex;
    align-items: center;
    flex: 1;
  }

  // 图标样式 - 固定尺寸，确保不会被文本挤压
  &__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 16px;
    margin-right: 8px;
    flex-shrink: 0; // 防止图标被压缩
  }

  // 文本样式 - 添加省略号效果
  &__title-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  // 分组标题样式
  &__group-title {
    display: block;
    font-size: 12px;
    color: #909399;
    padding: 30px 20px 10px;
    line-height: 1.0;
  }

  // 水平菜单的激活边框
  &__active-border {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 2px;
    background-color: var(--tui-color-primary);
  }

  // 激活状态样式
  &--active {
    color: var(--tui-menu-active-text-color);
    background-color: var(--tui-color-primary-light-9);
    // 添加左侧竖条效果
    border-left: 3px solid var(--tui-menu-active-text-color);
    padding-left: 17px; // 调整内边距以保持内容位置一致
  }

  // 禁用状态样式
  &--disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  // 分隔线样式
  &--divided {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 20px;
      right: 20px;
      height: var(--tui-border-width);
      background-color: var(--tui-border-color);
    }
  }

  // 当子菜单打开时，确保内容可见
  .tui-submenu__content--open {
    & .tui-menu-item__title-text {
      opacity: 1 !important;
      // 移除width和overflow的强制覆盖，避免影响ellipsis功能
    }
  }

  // 分组样式
  &[type="group"] {
    cursor: default;
    padding: 0;

    &:hover {
      background-color: transparent;
    }
  }
}

.tui-menu {
  &--collapse {

    // 折叠状态下的样式调整
    >.tui-menu-item {
      >.tui-menu-item__title-content {
        >.tui-menu-item__item-icon {
          visibility: visible;
        }

        >.tui-menu-item__title-text {
          opacity: 0;
          width: 0;
          transition: opacity var(--tui-transition-duration) ease 0s,
            width var(--tui-transition-duration) ease 0s,
            transform var(--tui-transition-duration) ease 0s;
          transform: translateX(-10px);
        }
      }
    }
  }

  // 非折叠状态下的样式
  &:not(.tui-menu--collapse) {
    >.tui-menu-item {
      >.tui-menu-item__title-content {
        >.tui-menu-item__title-text {
          opacity: 1;
          width: auto;
          overflow-x: hidden;
          transform: translateX(0);
          // 增加延迟时间，确保宽度动画结束后文本才显示
          transition: opacity var(--tui-transition-duration) ease var(--tui-transition-delay),
            width var(--tui-transition-duration) ease 0s,
            transform var(--tui-transition-duration) ease var(--tui-transition-delay);
        }
      }
    }
  }


}
</style>